import React from 'react';
import {TabBar} from 'antd-mobile';
import Home from './home/home'
import Search from './search/search'
import Order from './order/order'
import Me from './me/me'

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'oneTab',
            hidden: false
        };
    }

    renderContent(pageText) {
        switch (pageText) {
            case 'oneTab':
                return (
                    <Home/>
                );
            case 'twoTab':
                return (
                    <Search/>
                );
            case 'threeTab':
                return (
                    <Order/>
                );
            case 'fourTab':
                return (
                    <Me/>
                );
            default:
                return null;
        }
    }

    render() {
        return (
            <div style={{position: 'fixed', height: '100%', width: '100%', bottom: 0}}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    hidden={this.state.hidden}>
                    <TabBar.Item
                        title="外卖"
                        key="one"
                        icon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(https://ganks.oss-cn-shenzhen.aliyuncs.com/img/home.png) center center /  22px 22px no-repeat'
                        }}/>}
                        selectedIcon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(https://ganks.oss-cn-shenzhen.aliyuncs.com/img/home_fill.png) center center /  22px 22px no-repeat'
                        }}/>}
                        selected={this.state.selectedTab === 'oneTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'oneTab',
                            });
                        }}>
                        {this.renderContent('oneTab')}
                    </TabBar.Item>
                    <TabBar.Item
                        title="搜索"
                        key="two"
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(https://ganks.oss-cn-shenzhen.aliyuncs.com/img/find.png) center center /  22px 22px no-repeat'
                            }}/>}
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(https://ganks.oss-cn-shenzhen.aliyuncs.com/img/find_fill.png) center center /  22px 22px no-repeat'
                            }}/>}
                        selected={this.state.selectedTab === 'twoTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'twoTab',
                            });
                        }}>
                        {this.renderContent('twoTab')}
                    </TabBar.Item>
                    <TabBar.Item
                        title="订单"
                        key="three"
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(https://ganks.oss-cn-shenzhen.aliyuncs.com/img/order.png) center center /  22px 22px no-repeat'
                            }}/>}
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(https://ganks.oss-cn-shenzhen.aliyuncs.com/img/order_fill.png) center center /  22px 22px no-repeat'
                            }}/>}
                        selected={this.state.selectedTab === 'threeTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'threeTab',
                            });
                        }}>
                        {this.renderContent('threeTab')}
                    </TabBar.Item>
                    <TabBar.Item
                        title="我的"
                        key="four"
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(https://ganks.oss-cn-shenzhen.aliyuncs.com/img/people.png) center center /  22px 22px no-repeat'
                            }}/>}
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(https://ganks.oss-cn-shenzhen.aliyuncs.com/img/people_fill.png) center center /  22px 22px no-repeat'
                            }}/>}
                        selected={this.state.selectedTab === 'fourTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'fourTab',
                            });
                        }}>
                        {this.renderContent('fourTab')}
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}

export default App;